<template>
    <div>
        <div class="modal-mask" @click="handleClose"></div>
        <div class="n-dialog-container n-report-modal">
            <div class="n-dialog-header">
                举报 <a class="dialog-close" @click="handleClose"></a>
            </div>
            <div class="n-yj-form">
                <form @submit.prevent="()=>{return false;}">
                    <div class="form-field">
                        <el-radio-group v-model="yjForm.feedbackType">
                            <el-radio v-for="(t,i) in typeList" :key="i" :label="t">{{t}}</el-radio>
                            <!-- <el-radio label="违法犯罪">违法犯罪</el-radio>
                            <el-radio label="造谣传谣">造谣传谣</el-radio>
                            <el-radio label="垃圾广告">垃圾广告</el-radio>
                            <el-radio label="售卖假货">售卖假货</el-radio>
                            <el-radio label="非原创">非原创</el-radio>
                            <el-radio label="未成年人相关">未成年人相关</el-radio>
                            <el-radio label="其他">其他</el-radio> -->
                        </el-radio-group>
                    </div>
                    <div class="form-field textarea">
                        <textarea placeholder="请详细描述举报原因，便于平台判断违规情况" v-model="yjForm.content"></textarea>
                    </div>
                    <div class="yj-foot-btns">
                        <button class="confirm" @click="handleSubmit">提交</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>

<script>
import api from '@/api/api'
export default {
    data(){
        return {
            yjForm:{
                feedbackType:''
            },
            typeList:[],
            aliInfo:{

            }
        }
    },
    methods:{
        handleClose(){
            this.$emit('close');
        },
        handleSubmit(){
            
        }
    },
    destroyed(){
        document.body.style.overflow='inherit';
    },
    async mounted(){
        document.body.style.overflow='hidden';
        let res=await api.getFeedBackTypes({});
        this.typeList=res.data;
    }
}
</script>

<style scoped lang="less">
.n-report-modal{
    width:420px;
    // left:calc((100% - 420px) / 2);
    padding:25px 30px;
    height:auto;
    z-index:112;
    position: absolute;
    right:116px;
    bottom:120px;
    top:inherit;
    cursor:default;
    .n-yj-form{
        margin-top:25px;
    }
    .form-field{
        margin-bottom:20px;
        border-radius:8px;
        overflow: hidden;
        label{
            font-size:14px;
            color:#fff;
            margin-right:33px;
        }
        ::v-deep .el-radio__input .el-radio__inner{
            width:18px;height:18px;
            border-color:#49494F;
            background:#23232A;
            &:after{
                width:6px;height:6px;
                background:#23232A;
            }
        }
        ::v-deep .el-radio__input.is-checked .el-radio__inner{
            background:#11CCB1;
            border-color:#11CCB1;
        }
        ::v-deep .el-radio__input.is-checked+.el-radio__label{
            color:#fff;
        }
        ::v-deep .el-radio{
            margin-bottom:20px;
            width:98px;
            &:nth-child(3n){
                margin-right:0px;
            }
        }
        &.textarea{
            margin-top:23px;
            display: inline-block;
            width:100%;   
            textarea{
                height:110px;
                width:100%;
                border:none;
                background:#171719;
                resize: none;
                padding:10px 12px;
                color:#fff;
                font-size:14px;
            }
        }
        input[type="text"]{
            height:40px;
            padding-left:14px;
            border:none;
            width:100%;
            background:#171719;
            color:#fff;
            font-size:14px;
            padding-right:40px;
        }
    }
    
    .confirm{
        background:#11CCB1;
        opacity:.38;
        line-height:46px;
        border-radius:8px;
        text-align: center;
        display: inline-block;
        width:100%;
        color:#fff;
        border:none;
        font-size:16px;
        cursor: pointer;
    }
}









































</style>